/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import React, { useRef, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Tag, Spin } from '@arco-design/web-react';
import { RootState } from '@/store';
import Loading from '@/components/Loading/HorizonLoading';
import Config from '@/config';
import styles from './index.module.less';

const lines: (string | React.ReactNode)[] = [];
interface IProps {
  msglist?: any;
  className?:any;
}
function Conversation(props: IProps) {
  const { className, ...rest } = props;
//   const msgHistory = useSelector((state: RootState) => state.room.msgHistory);
  const [msgHistory,setmsgHistory]=React.useState([])
  // const msgHistory=[{value:'你好先生，我是餐厅的值班经理小杨，很抱歉让您感受不好，我来帮您解决这事，我能看一下这个汉堡吗？',user:'robot',isInterrupted:false},{value:'你看，这就是你们卖的汉堡，这也不知道是谁的头发，还好我还没吃下去。',user:'local',isInterrupted:false},{value:'真的很抱歉，如果是我碰到这种状况也会很不舒服，您看这样，我马上帮您换一个汉堡可以吗？',user:'robot',isInterrupted:false},{value:'什么？换一个，你在开玩笑吗？你不要以为我不懂法，按照法律法规，你们是可以赔偿我1000元的。',user:'local',isInterrupted:false},{value:'我们很重视您反馈的问题，大中午了，您现在还没有用餐，我先给您换一个汉堡，先吃着也别耽误您后面的事情。另外，您放心我也会尽我最大努力让您满意的。',user:'robot',isInterrupted:false}]
  const { userId } = useSelector((state: RootState) => state.room.localUser);
  const { isAITalking, isUserTalking } = useSelector((state: RootState) => state.room);
  const isAIReady = msgHistory.length > 0;
  const containerRef = useRef<HTMLDivElement>(null);
  React.useEffect(()=>{
    setmsgHistory(props?.msglist)
  },[props?.msglist])
  const isUserTextLoading = (owner: string) => {
    return owner === userId && isUserTalking;
  };

  const isAITextLoading = (owner: string) => {
    return owner === Config.BotName && isAITalking;
  };

  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.scrollTop = container.scrollHeight - container.clientHeight;
    }
  }, [msgHistory.length]);

  return (
    <div ref={containerRef} className={`${styles.conversation} ${className}`} {...rest}>
      {lines.map((line) => line)}
      {msgHistory?.map(({ utterances, role}, index) => {
        const isUserMsg = role === 'user';
        const isRobotMsg = role === 'system';
        if (!isUserMsg && !isRobotMsg) {
          return '';
        }
        return (
          <div
            className={`${styles.sentence} ${isUserMsg ? styles.user : styles.robot}`}
            key={`msg-${index}`}
          >
            <div className={styles.content}>
              {utterances}
              {/* <div className={styles['loading-wrapper']}>
                {isAIReady &&
                (isUserTextLoading(role) || isAITextLoading(role)) &&
                index === msgHistory.length - 1 ? (
                  <Loading gap={3} className={styles.loading} dotClassName={styles.dot} />
                ) : (
                  ''
                )}
              </div> */}
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default Conversation;
